/* eslint-disable */
<template>
  <div class="editNodeBox addNodeBox">
    <el-select
      class="selector"
      placeholder="选择或搜索类型"
      v-model="addNodeModel.typeId"
      value="value"
      size="mini"
      filterable
    >
      <el-option
        v-for="item in typeArr"
        :key="item.id"
        :label="item.id + ' ' + item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <div class="row">
      <label>
        <input class="input" v-model="addNodeModel.nodeAtId" placeholder="节点URI" />
      </label>
    </div>
    <div class="row">
      <label>
        <input class="input" v-model="addNodeModel.label_ZH" placeholder="节点标签" />
      </label>
    </div>
<!--    <div class="row">-->
<!--      <input v-model="addNodeModel.node_type" placeholder="节点类型" />-->
<!--    </div>-->
    <div class="row">
      <el-button class="el-button" size="mini" v-on:click="wantAddNode"
      >添加</el-button
      >
    </div>
  </div>
</template>

<script>
import { addNodeAPI } from "@/api/kgeditor/elementeditor";

export default {
  name: "addNodeComponent",
  data() {
    return {
      addNodeModel: {
        nodeAtId: "",
        label_ZH: "",
        typeId: null,
        running: false
      },
      KG: this.$parent.$parent.$parent.$parent.$refs.graphComponent.KG,
      typeArr: []
    };
  },
  created() {
    this.typeArr = this.KG.kgInfo.typeList;
  },
  watch:{
    "KG.update.typeList": {
      handler:function() {
        this.typeArr = null;
        this.typeArr = this.KG.kgInfo.typeList;
      },
      deep:true
    }
  },
  methods: {
    wantAddNode() {
      if (this.addNodeModel.nodeAtId == "") {
        this.$message.error("节点URI不能为空");
        return;
      }
      if (this.addNodeModel.label_ZH == "") {
        this.$message.error("节点标签不能为空");
        return;
      }
      if (this.addNodeModel.typeId == null) {
        this.$message.error("节点类型不能为空");
        return;
      }
      if (this.addNodeModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }
      this.addNode();
    },
    addNode() {
      let _this = this;
      _this.addNodeModel.running = true;
      addNodeAPI(
        {
          nodeAtId: _this.addNodeModel.nodeAtId,
          label_ZH: _this.addNodeModel.label_ZH,
          type_id: _this.addNodeModel.typeId,
          kgID: _this.KG.kgInfo.id
        },
        function(data) {
          _this.addNodeModel.id = data;
          _this.KG.addNode(
            _this.addNodeModel.id,
            _this.addNodeModel.nodeAtId,
            _this.addNodeModel.label_ZH,
            _this.addNodeModel.typeId
          );
          // JSON.parse(JSON.stringify(_this.addNodeModel))
          _this.$message.success("添加节点成功！");
        },
        function(error) {
          _this.$message.error("添加节点失败\n" + error);
        },()=>{
          _this.addNodeModel.running = false;
        }
      );
    }
  }
};
</script>

<style scoped>
.selector {
  width: 95%;
}
.input {
  display: block;
  margin: 0 auto;
  width: 85%;
  font-size: 10px;
}
</style>
